<template>
    <div>
        <div @click="openEdit">
            <header_moban_1 :title="row.title"></header_moban_1>
            <div class="resume_content_main f-14" v-if="row.html">
                <div v-html="row.html"></div>
            </div>
        </div>

        <DialogForm
            v-if="visable"
            v-model="visable"
            title="编辑"
            auto
            :formConfig="formConfig"
            :formData="formData"
            :rules="rules"
            @confirm="confirm"
        >
            <template slot="mavonEditor">
                <mavonEditor
                    class="h-vh-60"
                    v-model="formData.str"
                    @change="editorChange"
                ></mavonEditor>
            </template>
        </DialogForm>
    </div>
</template>

<script>
export default {
    components: {
        header_moban_1: () => import('@/components/bn/headerPages/moban_1.vue'),
        mavonEditor: () => import('@/components/mavonEditor/bnEdit.vue'),
    },
    props: {
        row: {
            type: Object,
            default() {
                return {}
            },
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            visable: false,
            formConfig: [
                {
                    label: '模块名',
                    type: 'input',
                    modelName: 'title',
                    className: 'w-300',
                },
                {
                    label: '内容区',
                    type: 'customInput',
                    slot: 'mavonEditor',
                },
            ],
            formData: {},
            rules: {
                title: [{ required: true, message: '请输入模块名字', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.row.is_need_default) {
            const defaultval = {
                title: '技能特长',
                str: '网络\n- 熟悉网络通信，并深入理解 HTTP、HTTP2、HTTPS、WebSocket等常见应用层协议。\n- 熟练使用 postman 或 apifox 进行接口调试。\n- 熟悉 JWT、CORS、HTTP Cache、cookie、XSS、CSRF等网络中常见的应用和安全相关技术。\n- 能利用网络实现文件上传、分片、鉴权、缓存等各种网络应用需求。\n\n前端基础能力\n- 熟练掌握 HTML5、CSS3、JavaScript（含 ES6+）。\n- 熟练使用原生 H5 完成 Web App。\n- 熟练使用 CSS3 的媒体查询完成响应式布局。\n- 深入理解原型链、异步、作用域链、this 指向、闭包、事件循环等 JS 核心原理。\n- 深入理解浏览器的工作原理。\n\n效率和工具\n- 熟练掌握诸多常用第三方库，包括：jquery、mockjs、axios、moment、echarts、elementui、localforage、animate.css、validate.js 等等。\n- 熟练使用 git。\n- 熟练使用 vscode、HBuilder。\n\n工程化\n- 深入理解模块化，能熟练使用 CommonJS、ES Module 模块化标准完成分模块开发。\n- 熟练使用 npm、yarn ，了解 webpack 的相关配置。\n- 了解 babel、postcss、eslint 等前端常见工具链的配置。\n\n框架\n- 熟练使用 vue2/vue3、vue-router、vuex、vue-ssr、element-ui ，nuxt2/nuxt3，hybrid - APP等技术完成应用开发，深入理解 vue 原理。\n- 熟练使用uniapp，electron等框架开发小程序与桌面应用。\n\n服务器\n- 能使用express、mongodb等技术开发服务器。\n- 能利用服务器完成接口书写，中间件拦截，静态资源管理，鉴权等功能的开发。\n\n个人亮点\n- 充分利用缓存相关技术，优化用户体验与降低服务器压力，注重优化，与提高用户体验。\n- 充分利用现代浏览器多线程，完成大文件高效切片与上传。\n- 有丰富的处理移动端兼容的经验与公共组件库开发经验。\n- 参与搭建过完善的项目服务监控系统。',
                html: '<p>网络</p>\n<ul>\n<li>熟悉网络通信，并深入理解 HTTP、HTTP2、HTTPS、WebSocket等常见应用层协议。</li>\n<li>熟练使用 postman 或 apifox 进行接口调试。</li>\n<li>熟悉 JWT、CORS、HTTP Cache、cookie、XSS、CSRF等网络中常见的应用和安全相关技术。</li>\n<li>能利用网络实现文件上传、分片、鉴权、缓存等各种网络应用需求。</li>\n</ul>\n<p>前端基础能力</p>\n<ul>\n<li>熟练掌握 HTML5、CSS3、JavaScript（含 ES6+）。</li>\n<li>熟练使用原生 H5 完成 Web App。</li>\n<li>熟练使用 CSS3 的媒体查询完成响应式布局。</li>\n<li>深入理解原型链、异步、作用域链、this 指向、闭包、事件循环等 JS 核心原理。</li>\n<li>深入理解浏览器的工作原理。</li>\n</ul>\n<p>效率和工具</p>\n<ul>\n<li>熟练掌握诸多常用第三方库，包括：jquery、mockjs、axios、moment、echarts、elementui、localforage、animate.css、validate.js 等等。</li>\n<li>熟练使用 git。</li>\n<li>熟练使用 vscode、HBuilder。</li>\n</ul>\n<p>工程化</p>\n<ul>\n<li>深入理解模块化，能熟练使用 CommonJS、ES Module 模块化标准完成分模块开发。</li>\n<li>熟练使用 npm、yarn ，了解 webpack 的相关配置。</li>\n<li>了解 babel、postcss、eslint 等前端常见工具链的配置。</li>\n</ul>\n<p>框架</p>\n<ul>\n<li>熟练使用 vue2/vue3、vue-router、vuex、vue-ssr、element-ui ，nuxt2/nuxt3，hybrid - APP等技术完成应用开发，深入理解 vue 原理。</li>\n<li>熟练使用uniapp，electron等框架开发小程序与桌面应用。</li>\n</ul>\n<p>服务器</p>\n<ul>\n<li>能使用express、mongodb等技术开发服务器。</li>\n<li>能利用服务器完成接口书写，中间件拦截，静态资源管理，鉴权等功能的开发。</li>\n</ul>\n<p>个人亮点</p>\n<ul>\n<li>充分利用缓存相关技术，优化用户体验与降低服务器压力，注重优化，与提高用户体验。</li>\n<li>充分利用现代浏览器多线程，完成大文件高效切片与上传。</li>\n<li>有丰富的处理移动端兼容的经验与公共组件库开发经验。</li>\n<li>参与搭建过完善的项目服务监控系统。</li>\n</ul>\n',
            }
            for (const key in defaultval) {
                this.$set(this.row, key, defaultval[key])
            }
        }
        this.$emit('loadSuccess', {
            row_code: this.row.row_code,
        })
    },
    methods: {
        openEdit() {
            this.formData = this.deepCopy(this.row)
            this.visable = true
        },
        confirm() {
            this.$emit('update', {
                info: this.formData,
            })
            this.visable = false
        },
        editorChange({ str, html }) {
            Object.assign(this.formData, {
                str,
                html,
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.resume_content_main {
    padding: 14px 20px;
}
</style>
